<template>
	<view>
		<!-- 话题介绍 -->
		<topic-info :topicinfo="topicinfo"></topic-info>

		<!-- tabbar -->
		<!-- 顶部导航 -->
		<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap" scrollItemStyle="width:50%;" scrollStyle="border-bottom:0;">				</swiper-tab-head>
		
		<!-- 列表 -->
		<view class="topic-detail-list">
			<block v-for="(item,index) in tablist" :key="index">
				<template v-if="tabIndex == index">
					<!-- 列表 -->
					<block v-for="(list,listIndex) in item.list" :key="listIndex">
						<common-list :item="list" :index="listIndex"></common-list>
					</block>
					
					<!-- 上拉加载更多 -->
					<load-more :loadtext="item.loadtext"></load-more>
				</template>
			</block>
		</view>
	</view>
</template>

<script>
import topicInfo from '../../components/topic/topic-info.vue'; //话题介绍
import swiperTabHead from '../../components/index/swiper-tab-head.vue'; //横向滚动
import commonList from '../../components/common/common-list.vue'; //热门列表
import loadMore from '../../components/common/load-more.vue'; //上拉加载
export default {
	components: {
		topicInfo,
		swiperTabHead,
		commonList,
		loadMore
	},
	data() {
		return {
			tabIndex: 0,
			tabBars: [{ name: '默认', id: 'moren' }, { name: '最新', id: 'zuixin' }],
			topicinfo: {
				titlepic: '../../static/demo/topicpic/5.jpeg',
				title: '忆往事，敬余生',
				desc: '我是描述',
				totalnum: '1000',
				todaynum: '1000'
			},
			tablist:[
				{
					loadtext: '上拉加载更多',
					list:[
						// 文字
						{
							userpic: '../../static/demo/userpic/1.jpg',
							username: '鲁迅',
							sex: 0, //0 男  1 女
							age: 25,
							isguanzhu: false,
							title: '什么都是我说的',
							titlepic: false,
							video: false,
							share: false,
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 356
						},
						// 图片
						{
							userpic: '../../static/demo/userpic/2.jpg',
							username: '王娜',
							sex: 1, //0 男  1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '../../static/demo/datapic/1.jpg',
							video: false,
							share: false,
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 356
						},
						// 视频
						{
							userpic: '../../static/demo/userpic/3.jpg',
							username: '李斯',
							sex: 0, //0 男  1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '../../static/demo/datapic/2.jpg',
							video: {
								looknum: '20w',
								long: '2:47'
							},
							share: false,
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 356
						},
						// 分享
						{
							userpic: '../../static/demo/userpic/4.jpg',
							username: '黄樱',
							sex: 1, //0 男  1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: false,
							video: false,
							share: {
								title: '我是分享标题',
								titlepic: '../../static/demo/datapic/13.jpg'
							},
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 356
						}
					]
				},
				{
					loadtext: '上拉加载更多',
					list:[
						// 文字
						{
							userpic: '../../static/demo/userpic/1.jpg',
							username: '李煜',
							sex: 0, //0 男  1 女
							age: 25,
							isguanzhu: false,
							title: '问君能有几多愁，恰似一江春水向东流',
							titlepic: false,
							video: false,
							share: false,
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 356
						},
						// 图片
						{
							userpic: '../../static/demo/userpic/2.jpg',
							username: '李白',
							sex: 0, //0 男  1 女
							age: 25,
							isguanzhu: false,
							title: '天不言而四时行，地不语而万物生',
							titlepic: '../../static/demo/datapic/1.jpg',
							video: false,
							share: false,
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 356
						},
						// 视频
						{
							userpic: '../../static/demo/userpic/3.jpg',
							username: '曹操',
							sex: 0, //0 男  1 女
							age: 25,
							isguanzhu: false,
							title: '宁叫天下人负我，勿叫天下人负我',
							titlepic: '../../static/demo/datapic/2.jpg',
							video: {
								looknum: '20w',
								long: '2:47'
							},
							share: false,
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 356
						},
						// 分享
						{
							userpic: '../../static/demo/userpic/4.jpg',
							username: '黄樱',
							sex: 1, //0 男  1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: false,
							video: false,
							share: {
								title: '我是分享标题',
								titlepic: '../../static/demo/datapic/13.jpg'
							},
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 356
						}
					]
				}
			]
		};
	},
	onPullDownRefresh() {
		// 下拉刷新调用
		this.getdata()
	},
	onReachBottom() {
		//上拉加载
		this.loadMore()
	},
	methods: {
			// 上拉刷新事件
			getdata(){
				
				// 关闭下拉刷新
				setTimeout(()=> {
					// 获取数据
					let arr = [
						// 文字
						{
							userpic: '../../static/demo/userpic/1.jpg',
							username: '李煜123',
							sex: 0, //0 男  1 女
							age: 25,
							isguanzhu: false,
							title: '问君能有几多愁，恰似一江春水向东流',
							titlepic: false,
							video: false,
							share: false,
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 356
						},
						// 图片
						{
							userpic: '../../static/demo/userpic/2.jpg',
							username: '李白123',
							sex: 0, //0 男  1 女
							age: 25,
							isguanzhu: false,
							title: '天不言而四时行，地不语而万物生',
							titlepic: '../../static/demo/datapic/1.jpg',
							video: false,
							share: false,
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 356
						},
						// 视频
						{
							userpic: '../../static/demo/userpic/3.jpg',
							username: '曹操123',
							sex: 0, //0 男  1 女
							age: 25,
							isguanzhu: false,
							title: '宁叫天下人负我，勿叫天下人负我',
							titlepic: '../../static/demo/datapic/2.jpg',
							video: {
								looknum: '20w',
								long: '2:47'
							},
							share: false,
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 356
						},
						// 分享
						{
							userpic: '../../static/demo/userpic/4.jpg',
							username: '黄樱',
							sex: 1, //0 男  1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: false,
							video: false,
							share: {
								title: '我是分享标题',
								titlepic: '../../static/demo/datapic/13.jpg'
							},
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 356
						}
					]
					// 赋值
					this.tablist[this.tabIndex].list = arr
					uni.stopPullDownRefresh()
				}, 2000);
			},
		
		// tabber 点击事件
		tabtap(index) {
			console.log(index)
			this.tabIndex = index;
		},
		
		loadMore() {
			// 修改状态
			if (this.tablist[this.tabIndex].loadtext != '上拉加载更多') {
				return;
			}
			// 获取数据
			this.tablist[this.tabIndex].loadtext = '加载中...';
			setTimeout(() => {
				// 获取完成
				let obj = {
							userpic: '../../static/demo/userpic/8.jpg',
							username: '李白',
							sex: 0, //0 男  1 女
							age: 25,
							isguanzhu: false,
							title: '天不言而四时行，地不语而万物生',
							titlepic: '../../static/demo/datapic/8.jpg',
							video: false,
							share: false,
							path: '深圳 龙岗',
							sharenum: 20,
							commentnum: 30,
							goodnum: 356
						};
		
				this.tablist[this.tabIndex].list.push(obj);
				this.tablist[this.tabIndex].loadtext = '上拉加载更多';
			}, 1000);
		
			// this.tablist[this.tabIndex].loadtext = "没有更多数据了";
		}
	
		
	}
};
</script>

<style></style>
